<template>
    <h1>监听reacitve中的某个属性</h1>
    <div>
        姓名: <input type="text" v-model="person.name"><br>
        年龄：<input type="text" v-model="person.age"><br>
        职业:<input type="text" v-model="person.job"><br>
    </div>
</template>
<script>
/* 
    watch监听reactive类型的响应式数据
    deep这个选项是无效的
    如果新数据将旧数据给覆盖了，解决的办法，让其监听计算属性
    注意点：在我们进行监听的过程中，如果要监听reactive响应式对象中的某个属性的时候，这个时候，watch方法的第一个参数
    必须是一个回调函数(格式是:()=>对象.属性)，不能是对象.属性
*/
import { reactive } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
 setup(){
   const person=reactive({
        name:'Giles',
        age:33,
        job:'teacher'
   })
    watch(()=>person.name,(newval,oldval)=>{
    console.log(newval,oldval);
   },{
    immediate:true
   })
   return{
    person
   }
 }
}
</script>

<style>

</style>